<template>
    <div class="bottom-bar">
        <div class="choose-all">
            <check-bottom 
            :isChooise="isCheckedAll"
            @click.native = "clickAll"
            ></check-bottom>
            <span>全选</span>
        </div>
        <div>
            合计:{{totalPrice}}
        </div>
        <div class="go-buy" @click="goBuy">
            去结算({{getCartCheckLength}})
        </div>
    </div>
</template>

<script>
    import checkBottom from 'components/content/checkBottom/checkBottom.vue'
    import {mapGetters} from 'vuex'

    export default {
        components:{
            checkBottom
        },
        computed:{
            ...mapGetters(["isCheckedAll","totalPrice","getCartCheckLength"])
        },
        methods:{
            clickAll(){               
                if(this.isCheckedAll){
                    this.$store.dispatch("editChecked",{FalseAll:true})                
                }else{               
                    this.$store.dispatch("editChecked",{TrueAll:true})
                }
            },
            goBuy(){
                if(this.getCartCheckLength == 0){
                    this.$toast.show("请选择购买的商品!",1500)
                }
            }
        }
    }
</script>

<style scoped>
    .bottom-bar{
        height: 40px;
        position: relative;
        z-index: 1;
        background: #fff;
        box-shadow: 0 -1px 1px rgba(100, 100, 100, .1);
        padding:0 10px;
    }
    .bottom-bar{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .choose-all{
        display: flex;
        align-items: center;
    }
    .go-buy{
        padding: 5px 8px;
        background: var(--color-tint);
        border-radius: 26px;
        color: #fff;
        font-size: .8rem;
    }
</style>